<template>
  <el-form size="small">
    <el-form-item>
      <el-radio v-model="radioValue" :label="1">
        日，允许的通配符[, - * ? / L W]
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="2">不指定</el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="3">
        周期从
        <el-input-number v-model="cycle01" :min="1" :max="30" />
        -
        <el-input-number
          v-model="cycle02"
          :min="cycle01 ? cycle01 + 1 : 2"
          :max="31"
        />
        日
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="4">
        从
        <el-input-number v-model="average01" :min="1" :max="30" />
        号开始，每
        <el-input-number
          v-model="average02"
          :min="1"
          :max="31 - average01 || 1"
        />
        日执行一次
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="5">
        每月
        <el-input-number v-model="workday" :min="1" :max="31" />
        号最近的那个工作日
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="6">本月最后一天</el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="7">
        指定
        <el-select
          v-model="checkboxList"
          clearable
          placeholder="可多选"
          multiple
          style="width: 100%"
        >
          <el-option v-for="item in 31" :key="item" :value="item">
            {{ item }}
          </el-option>
        </el-select>
      </el-radio>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'CrontabDay',
    props: ['check', 'cron'],
    data() {
      return {
        radioValue: 1,
        workday: 1,
        cycle01: 1,
        cycle02: 2,
        average01: 1,
        average02: 1,
        checkboxList: [],
        checkNum: this.$options.propsData.check,
      }
    },
    computed: {
      // 计算两个周期值
      cycleTotal: function () {
        const cycle01 = this.checkNum(this.cycle01, 1, 30)
        const cycle02 = this.checkNum(
          this.cycle02,
          cycle01 ? cycle01 + 1 : 2,
          31,
          31
        )
        return cycle01 + '-' + cycle02
      },
      // 计算平均用到的值
      averageTotal: function () {
        const average01 = this.checkNum(this.average01, 1, 30)
        const average02 = this.checkNum(this.average02, 1, 31 - average01 || 0)
        return average01 + '/' + average02
      },
      // 计算工作日格式
      workdayCheck: function () {
        const workday = this.checkNum(this.workday, 1, 31)
        return workday
      },
      // 计算勾选的checkbox值合集
      checkboxString: function () {
        const str = this.checkboxList.join()
        return str == '' ? '*' : str
      },
    },
    watch: {
      radioValue: 'radioChange',
      cycleTotal: 'cycleChange',
      averageTotal: 'averageChange',
      workdayCheck: 'workdayChange',
      checkboxString: 'checkboxChange',
    },
    methods: {
      // 单选按钮值变化时
      radioChange() {
        ;('day rachange')
        if (this.radioValue !== 2 && this.cron.week !== '?') {
          this.$emit('update', 'week', '?', 'day')
        }

        switch (this.radioValue) {
          case 1:
            this.$emit('update', 'day', '*')
            break
          case 2:
            this.$emit('update', 'day', '?')
            break
          case 3:
            this.$emit('update', 'day', this.cycleTotal)
            break
          case 4:
            this.$emit('update', 'day', this.averageTotal)
            break
          case 5:
            this.$emit('update', 'day', this.workday + 'W')
            break
          case 6:
            this.$emit('update', 'day', 'L')
            break
          case 7:
            this.$emit('update', 'day', this.checkboxString)
            break
        }
        ;('day rachange end')
      },
      // 周期两个值变化时
      cycleChange() {
        if (this.radioValue == '3') {
          this.$emit('update', 'day', this.cycleTotal)
        }
      },
      // 平均两个值变化时
      averageChange() {
        if (this.radioValue == '4') {
          this.$emit('update', 'day', this.averageTotal)
        }
      },
      // 最近工作日值变化时
      workdayChange() {
        if (this.radioValue == '5') {
          this.$emit('update', 'day', this.workdayCheck + 'W')
        }
      },
      // checkbox值变化时
      checkboxChange() {
        if (this.radioValue == '7') {
          this.$emit('update', 'day', this.checkboxString)
        }
      },
    },
  }
</script>
